<script lang="ts" setup>
import { defineComponent, onMounted, ref } from "vue";
import { loadRecapcha, transfromFile } from "~/api/public";
import { Slider, Divider, Select, Space } from "ant-design-vue";
import { Snackbar } from "@varlet/ui";
const files = ref(new Array<any>());
const file = computed(() => {
  if (files.value.length > 0) {
    return files.value[0].file as File;
  }
  return undefined;
});
const quality = ref(50);
const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  },
});
const items = ref(["jpg", "png", "webp", "avif"]);
const type = ref();
const name = ref();
const addItem = (e: any) => {
  e.preventDefault();
  if (!name.value) return;
  items.value.push(name.value);
  name.value = "";
};
function handleAfterRead(file: any) {
  const { name } = file.file as File;
  let __type = name.split(".")[1];
  let isInclude = false;
  items.value.some((item) => {
    if (__type.includes(item)) {
      type.value = item;
      isInclude = true;
      return true;
    }
  });
  if (!isInclude) {
    type.value = __type;
    items.value.push(__type);
  }
}
onMounted(() => {
  loadRecapcha();
});
const loding = ref(false);
const url = ref();
async function start() {
  loding.value = true;
  transfromFile({
    file: files.value[0].file,
    quality: quality.value,
    type: type.value,
  })
    .then(({ url: _url }) => {
      url.value = _url;
    })
    .catch((err) => {
      console.error(err);
      Snackbar.error("转换失败,检查您的文件格式是否正确。详情请查看控制台");
    })
    .finally(() => {
      loding.value = false;
    });
}
</script>

<template>
  <section>
    <var-form
      style="
        width: 300px;
        box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
        padding: 2em;
        border-radius: 0.5em;
      "
      @submit="start()"
    >
      <var-space
        direction="column"
        :size="[14, 0]"
      >
        <h2>图片格式转换工具</h2>
        <Divider>选择图片</Divider>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <var-uploader
            v-model="files"
            :maxlength="1"
            @after-read="handleAfterRead"
          />
          <div v-if="file">
            <div>名字：{{ file.name }}</div>
            <div>大小：{{ (file.size / 1000).toFixed(2) }}kb</div>
          </div>
        </div>
        <ClientOnly>
          <Divider>选择转换质量：{{ quality }}%</Divider>
          <Slider
            style="width: 100%"
            :min="10"
            :max="100"
            :step="10"
            v-model:value="quality"
          />
          <Divider>选择转换后格式{{ type ? `：${type}` : "" }}</Divider>
          <Select
            v-model:value="type"
            placeholder="选择格式"
            style="width: 300px"
            :options="items.map((item) => ({ value: item }))"
          >
            <template #dropdownRender="{ menuNode: menu }">
              <v-nodes :vnodes="menu" />
              <Divider style="margin: 4px 0">新增选项</Divider>
              <Space style="padding: 4px 8px">
                <var-input
                  v-model="name"
                  variant="outlined"
                  size="small"
                  placeholder="输入格式"
                />
                <var-button
                  @click="addItem"
                  type="primary"
                >
                  添加
                </var-button>
              </Space>
            </template>
          </Select>
        </ClientOnly>

        <var-button
          @click="start"
          type="primary"
          native-type="submit"
          :loading="loding"
          >开始转换</var-button
        >
      </var-space>
    </var-form>
    <div v-if="url">
      <Divider>转换后：</Divider>
      <img
        :src="url"
        alt=""
      />
    </div>
  </section>
</template>

<style lang="less" scoped>
@import url("/assets/css/screen.less");
section {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-y: auto;
  .media({
    flex-direction: column;
  },phone);
  img {
    margin: 2em;
    border-radius: 0.5em;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    max-width: max(50vw, 50vh);
  }
}
</style>
